<template>
  <div class="footer">
    <div class="tel" style="display: none;">
      <SVGTel class="icon-tel"></SVGTel> (021)-67892070
    </div>
    <div class="address">
      <SVGLocation class="icon-location"></SVGLocation>
      上海市闵行区东兰路古美创智中心L2-201室 | 上海市松江区沪松路999号419室
    </div>
    <div class="email">
      <SVGMail class="icon-mail"></SVGMail>info@elloworld.com
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url("../assets/less/variables.less");
.footer {
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  justify-content: space-between;
  justify-items: center;
  padding-bottom: 4vh;
  padding-left: 30px;
  padding-right: 30px;
  font-size: @fontsize-big;
  @media (max-width: @screen-sm-max) {
    display: block;
    line-height: 1;
    height: auto;
    width: 100%;
    padding-left: 28vw;
    text-align: left;
    padding-bottom: 9vh;
    & > div {
      display: block;
      font-size: 3vw;
      line-height: 2;
      margin: 0;
    }
  }
  @media (max-width: @screen-big-max) {
    font-size: @fontsize-base;
  }
  @media (max-width: @screen-xbig-max) {
    font-size: @fontsize-big;
  }
  @media all and (orientation: landscape) and (max-width: @screen-sm-max) {
    padding-left: 38vw;
    & > div {
      font-size: 2vh;
    }
  }
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
  @media (max-width: @screen-xbig-max) {
    width: @fontsize-big;
    height: @fontsize-big;
  }
  @media (max-width: @screen-big-max) {
    width: @fontsize-base;
    height: @fontsize-base;
  }
  @media (max-width: @screen-sm-max) {
    width: 3vw;
    height: 3vw;
    margin-right: 1vw;
  }
  @media all and (orientation: landscape) and (max-width: @screen-sm-max) {
    width: 2vh;
    height: 2vh;
  }
}
</style>

<script>
import SVGTel from "@/components/icon/SVGTel.vue";
import SVGLocation from "@/components/icon/SVGLocation.vue";
import SVGMail from "@/components/icon/SVGMail.vue";
export default {
  components: {
    SVGTel: SVGTel,
    SVGLocation: SVGLocation,
    SVGMail: SVGMail,
  },
};
</script>
